<template>
  <div class="share-wrap" @click="shareClose">
    <div class="share-cover" v-show="shareShow"></div>
    <div class="share-con" :class="{shareShow:shareShow}">
      <div class="share-tt">分享到</div>
      <ul>
        <li>
          <a class="share-icon icon-sina" :href="sinaUrl" target="_blank">
            <span>新浪微博</span>
          </a>
        </li>
        <li>
          <a class="share-icon icon-qzone" :href="qzoneUrl" target="_blank">
            <span>QQ空间</span>
          </a>
        </li>
      </ul>
      <div class="share-cancel">
        <span>取消</span>
      </div>
    </div>
</div>
</template>
<script>
export default{
  name: 'sm-share',
  props: ['shareTitle', 'sharePic', 'shareUrl', 'shareOpen'],
  data(){
    return{
      sinaUrl: "http://service.weibo.com/share/share.php?url=" + this.shareUrl + "&title=" + this.shareTitle +
          "&pic=" + this.sharePic + "&appkey=",
      qzoneUrl: "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" + this.shareUrl + "&title=" + this.shareTitle +
        "&desc=" + this.shareTitle + "&summary=''&site=" + this.shareUrl,
      shareShow: this.shareOpen
    }
  },
  methods: {
    shareClose(){
      this.shareShow = false
      this.$emit('shareClose') // 分发消息到父组件
    }
  }
}
</script>

<style lang="scss">
  .share-wrap,
  .share-cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
  }
  .share-cover {
    z-index: 1001;
    background-color: rgba(0, 0, 0, .5);
  }
  .share-con {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    z-index: 1002;
    transform: translateY(100%);
    transition: .5s;
    .share-tt {
      color: #666;
      font-size: 16px;
      display: block;
      text-align: center;
      margin: 10px auto;
      line-height: 20px;
    }
    ul {
      display: flex;
      margin-bottom: 15px;
    }
    ul>li {
      flex: 1;
    }
    ul>li a span {
      text-align: center;
      display: block;
      font-size: 12px;
      transform: translateY(55px);
      color: #4f5157;
    }
    .share-icon {
      display: block;
      height: 50px;
      width: 50px;
      margin: 0 auto 10px;
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center center;
      position: relative;
    }
    .icon-sina {
      background-image: url()
    }
    .icon-qzone {
      background-image: url()
    }
    .share-cancel {
      border-top: 1px solid #C7C7C7;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px;
    }
  }
  .shareShow {
    transform: translateY(0);
  }
</style>
